$lgn-idp-margin: 0.5rem 0;
$lgn-idp-padding: 0 1px;
$lgn-idp-provider-name-line-height: 36px;
$lgn-idp-border-radius: 0.5rem;
$lgn-idp-logo-size: 46px;

@mixin lgn-idp-base {
  display: block;
  margin: $lgn-idp-margin;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  padding: $lgn-idp-padding;
  border-radius: $lgn-idp-border-radius;
  border-width: 1px;
  border-style: solid;
  transition: border-color 0.2s ease-in-out;

  span.logo {
    height: $lgn-idp-logo-size;
    width: $lgn-idp-logo-size;
  }

  span.provider-name {
    line-height: $lgn-idp-provider-name-line-height;
    position: relative;
    left: calc(50% - $lgn-idp-logo-size);
    transform: translateX(-50%);
  }

  &.google {
    span.logo {
      height: 46px;
      width: 46px;
      background-image: var(--google-image-src);
      background-size: 25px;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 5px;
    }
  }

  &.github {
    span.logo {
      height: 46px;
      width: 46px;
      background-image: var(--github-image-src);
      background-size: 25px;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 5px;
    }
  }

  &.gitlab {
    span.logo {
      height: 46px;
      width: 46px;
      background-image: var(--gitlab-image-src);
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 5px;
    }
  }

  &.azure {
    span.logo {
      height: 46px;
      width: 46px;
      background-image: var(--azure-image-src);
      background-size: 25px;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 5px;
    }
  }

  &.apple {
    span.logo {
      height: 46px;
      width: 46px;
      background-image: var(--apple-image-src);
      background-size: 25px;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 5px;
      transform: translateY(-2px);
    }
  }
}
